<template>
    <div class="main">
        <h5>团购管理</h5>
        <template>
            <el-tabs v-model="activeName" @tab-click="handleClick" >
                <el-tab-pane label="全部" name="first">
                    <template>
                        <el-table
                                :data="dataShow"
                                border
                                style="width: 100%"
                                max-height="500"
                        >
                            <el-table-column
                                    fixed
                                    prop="groupCode"
                                    label="团购编号"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="goodsName"
                                    label="团购商品"
                                    width="120">

                            </el-table-column>
                            <el-table-column
                                    prop="userName"
                                    label="团长"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="groupTotalNum"
                                    label="团购人数"
                                    style="text-align: center"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="groupNowNum"
                                    label="现有人数"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="groupCreateTime"
                                    label="拼团开始时间"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="groupDeadline"
                                    label="拼团结束时间"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="groupStatus"
                                    label="拼团状态"
                                    width="100">
                            </el-table-column>

                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="70">
                                <template slot-scope="scope">
                                    <el-button @click="chakan(scope.row)" type="text" size="small">查看</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <!--页码-->
                    <div class="block">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="currentPage1"
                                :page-size="pageSize"
                                layout="total, prev, pager, next"
                                :total="tableData.length">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="拼团成功" name="second">
                    <template>
                        <el-table
                                :data="dataShow"
                                border
                                style="width: 100%"
                                max-height="500"
                        >
                            <el-table-column
                                    fixed
                                    prop="groupCode"
                                    label="团购编号"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="goodsName"
                                    label="团购商品"
                                    width="120">

                            </el-table-column>
                            <el-table-column
                                    prop="userName"
                                    label="团长"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="groupTotalNum"
                                    label="团购人数"
                                    style="text-align: center"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="groupNowNum"
                                    label="现有人数"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="groupCreateTime"
                                    label="拼团开始时间"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="groupDeadline"
                                    label="拼团结束时间"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="groupStatus"
                                    label="拼团状态"
                                    width="100">
                            </el-table-column>

                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="70">
                                <template slot-scope="scope">
                                    <el-button @click="chakan(scope.row)" type="text" size="small">查看</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <!--页码-->
                    <div class="block">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="currentPage1"
                                :page-size="pageSize"
                                layout="total, prev, pager, next"
                                :total="tableCategory.length">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="拼团中" name="third">
                    <template>
                        <el-table
                                :data="dataShow"
                                border
                                style="width: 100%"
                                max-height="500"
                        >
                            <el-table-column
                                    fixed
                                    prop="groupCode"
                                    label="团购编号"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="goodsName"
                                    label="团购商品"
                                    width="120">

                            </el-table-column>
                            <el-table-column
                                    prop="userName"
                                    label="团长"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="groupTotalNum"
                                    label="团购人数"
                                    style="text-align: center"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="groupNowNum"
                                    label="现有人数"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="groupCreateTime"
                                    label="拼团开始时间"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="groupDeadline"
                                    label="拼团结束时间"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="groupStatus"
                                    label="拼团状态"
                                    width="100">
                            </el-table-column>

                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="70">
                                <template slot-scope="scope">
                                    <el-button @click="chakan(scope.row)" type="text" size="small">查看</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <!--页码-->
                    <div class="block">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="currentPage1"
                                :page-size="pageSize"
                                layout="total, prev, pager, next"
                                :total="tableData.length">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="拼团失败" name="fourth">
                    <template>
                        <el-table
                                :data="dataShow"
                                border
                                style="width: 100%"
                                max-height="500"
                        >
                            <el-table-column
                                    fixed
                                    prop="groupCode"
                                    label="团购编号"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="goodsName"
                                    label="团购商品"
                                    width="120">

                            </el-table-column>
                            <el-table-column
                                    prop="userName"
                                    label="团长"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="groupTotalNum"
                                    label="团购人数"
                                    style="text-align: center"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="groupNowNum"
                                    label="现有人数"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="groupCreateTime"
                                    label="拼团开始时间"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="groupDeadline"
                                    label="拼团结束时间"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="groupStatus"
                                    label="拼团状态"
                                    width="100">
                            </el-table-column>

                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="70">
                                <template slot-scope="scope">
                                    <el-button @click="chakan(scope.row)" type="text" size="small">查看</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <!--页码-->
                    <div class="block">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="currentPage1"
                                :page-size="pageSize"
                                layout="total, prev, pager, next"
                                :total="tableCategory.length">
                        </el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </template>
        <!--模态框 查看-->
        <el-dialog
                title="团购详情"
                :visible.sync="dialogVisible"
                top="5vh"
                width="60%"
                :before-close="handleClose">
            <div class="top">
                <div class="divOrderGroup">
                    <h5>团购信息</h5>
                    <div >
                        <p ><span>团购编号</span> :<span class="bh">{{DetailsArr.groupCode}}</span></p>
                        <p ><span>团购商品名</span> :<span class="bh">{{DetailsArr.goodsName}}</span></p>
                        <p ><span>团长名</span> :<span class="bh">{{DetailsArr.leaderUser}}</span></p>
                        <p ><span>团购人数</span> :<span class="bh">{{DetailsArr.groupTotalNum}}</span></p>
                        <p ><span>现有人数</span> :<span class="bh">{{DetailsArr.groupNowNum}}</span></p>
                        <p ><span>开始时间</span> :<span class="bh">{{DetailsArr.groupCreateTime}}</span></p>
                        <p ><span>结束时间</span> :<span class="bh">{{DetailsArr.groupDeadline}}</span></p>
                        <p ><span>团购状态</span> :<span class="bh">{{DetailsArr.groupStatus}}</span></p>
                    </div>
                </div>
                <div class="divGoodsDetails">
                    <h5>商品信息</h5>
                    <div>
                        <template>
                            <el-table
                                    :data="DetailsGoods"
                                    style="width:70%;margin-left: 10px">
                                <el-table-column
                                        label="商品信息"
                                        width="120">
                                    <el-image style="width: 75px;height: 60px;" :src="DetailsGoods.goodsImg">
                                    </el-image>
                                </el-table-column>
                                <el-table-column
                                        prop="goodsName"
                                        label="商品名"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="goodsPrice"
                                        label="价格"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="goodsDesc"
                                        label="描述"
                                        width="120">
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                </div>
            </div>
            <div class="divGoodsDetailsA">
                <h5>用户信息</h5>
                <div>
                    <template>
                        <el-table
                                :data="DetailsArr.helperUser"
                                style="width: 100%">
                            <el-table-column
                                    label="用户信息"
                                    width="180">
                                <template slot-scope="scope">
                                    <el-image style="width: 75px;height: 60px;" :src="scope.row.userIcon">
                                    </el-image>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="userId"
                                    label="用户Id">
                            </el-table-column>
                            <el-table-column
                                    prop="userName"
                                    label="用户昵称"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="userCreateTime"
                                    label="参团日期">
                            </el-table-column>

                        </el-table>
                    </template>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>



<script>
    export default {
        name: "orderGroup-index",
        data() {
            return {
                activeName: 'first',
                tableData: [],
                goodsArr:[              //团购商品的数组

                ],
                currentPage1:5,
                currentPage4:5,
                pageSize:1,//每页显示数量
                dataShow:'',//当前显示的数据
                pageNum:'',//总页数
                totalPage:[],//每页显示的数量
                currentPage:0,
                goodsUserArr:[
                    {
                        UserId:'0001',
                        UserImg:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=133266605,1457109452&fm=26&gp=0.jpg',
                        UserName:'周伯通',
                        JoinDate:'2020-12-31 19:00',
                        OrderState:'待收货'
                    }
                ],  //团购用户数组
                DetailsArr:[], //点击查看团购订单数组
                DetailsGoods: [{}], //点击查看详情具体商品详情数组
                dialogVisible: false, //模态框显示状态
                orderGroupState:["全部","拼团成功","拼团中","拼团失败"], //订单状态
                tableCategory:[],
                a:["团购编号","团购商品名","用户名","团购人数","还差人数","开始时间","结束时间","团购状态","商品编号"],
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab.index);
                // this.dialogVisible = true
                this.tableCategory=[];
                for (var i=0;i<this.tableData.length;i++){
                    if( this.tableData[i].groupStatus==this.orderGroupState[tab.index]){
                        this.tableCategory.push(this.tableData[i])
                    }
                    this.fenye(this.tableCategory)
                }
                console.log(this.dataShow)

            },
            chakan(tab){

                var groupId=tab.groupId;
                this.$axios.post('/api/group/detail?groupId='+groupId).then(res=>{
                    if (res.data.code==200){
                        console.log(res.data.data)
                        this.DetailsArr=[]
                        this.DetailsArr=res.data.data[0]
                        this.DetailsGoods[0]=this.DetailsArr.goods;
                        var arrA=[];

                        res.data.data.forEach((item,index)=>{
                            if (item.helperUser){
                                arrA.push(item.helperUser[0])
                            }

                        })
                        this.DetailsArr.helperUser=arrA;
                        this.DetailsArr.goodsName=this.DetailsArr.goods.goodsName;
                        //团购状态
                        if (this.DetailsArr.groupStatus==0){
                            this.DetailsArr.groupStatus='拼团中'
                        }else if (this.DetailsArr.groupStatus==1) {
                            this.DetailsArr.groupStatus='拼团成功'
                        }else if (this.DetailsArr.groupStatus==2) {
                            this.DetailsArr.tableData[index].groupStatus='拼团失败'
                        }

                        //console.log(this.DetailsArr.goods)

                        console.log(this.DetailsArr)
                        this.dialogVisible = true;
                    }

                })

            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val-1;
                this.dataShow = this.totalPage[this.currentPage];
                console.log(this.currentPage)
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            fenye(tbData){
                //    分页
                if(tbData.length>0){
                    // 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
                    this.pageNum = Math.ceil(tbData.length / this.pageSize) || 1;
                    console.log(this.pageNum)
                    for (let i = 0; i < this.pageNum; i++) {
                        // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
                        // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
                        this.totalPage[i] = tbData.slice(this.pageSize * i, this.pageSize * (i + 1))
                    }
                    console.log(this.totalPage)
                    //获取到数据后显示第一页内容
                    this.dataShow = this.totalPage[this.currentPage];
                    console.log(this.dataShow)
                }
            }
        },
        mounted() {
            this.$axios.post("/api/group/list" ).then((res)=>{
                console.log(res)
                if (res.data.code==200){
                    this.tableData=res.data.data

                    this.tableData.forEach((item,index)=>{
                        //this.goodsArr.push(item.goods)
                        //this.tableData(index).goodsName=item.goods.goodsName
                        this.tableData[index].goodsName=item.goods.goodsName
                        this.tableData[index].userName=item.leaderUser.userName
                        //console.log(item.leaderUser)
                        console.log(this.tableData)
                        if (item.groupStatus==0){
                            this.tableData[index].groupStatus='拼团中'
                        }else if (item.groupStatus==1) {
                            this.tableData[index].groupStatus='拼团成功'
                        }else if (item.groupStatus==2) {
                            this.tableData[index].groupStatus='拼团失败'
                        }
                    })
                    this.fenye(this.tableData)

                }
            })
        }
    }
</script>

<style scoped>
    .block{
        text-align: right;
        margin-right: 5px;
    }
    .top{
        overflow:hidden;
        height: 100%;

    }
    .divOrderGroup{
        text-align: left;
        font-size: 12px;
        width: 200px;
        float: left;

    }
    .divGoodsDetails{
        text-align: left;
    }

    .divGoodsDetailsImg>img{
        width: 75px;
        height: 50px;
    }

</style>